<template>
  <a-modal
    class="edit-org-dialog"
    v-model:visible="dataWrapper.visiable"
    title="编辑部门"
    @ok="handleOk"
    @cancel="cancel"
  >
    <a-form
      :model="dataWrapper.formData"
      :rules="rules"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 16 }"
    >
      <a-form-item has-feedback label="父ID" v-bind="validateInfos.pid">
        <a-input
          v-model:value="dataWrapper.formData.pid"
          placeholder="请输入父级ID"
        />
      </a-form-item>
      <a-form-item has-feedback label="部门名称" v-bind="validateInfos.name">
        <a-input
          v-model:value="dataWrapper.formData.name"
          placeholder="请输入部门名称"
        />
      </a-form-item>
      <a-form-item has-feedback label="部门标识" v-bind="validateInfos.code">
        <a-input
          v-model:value="dataWrapper.formData.code"
          placeholder="请输入部门标识"
        />
      </a-form-item>
      <a-form-item has-feedback label="部门level" v-bind="validateInfos.level">
        <a-input-number
          v-model:value="dataWrapper.formData.level"
          :min="1"
          :max="10"
        />
      </a-form-item>
      <a-form-item has-feedback label="部门电话" v-bind="validateInfos.phone">
        <a-input
          v-model:value="dataWrapper.formData.phone"
          placeholder="请输入部门电话"
        />
      </a-form-item>
      <a-form-item
        has-feedback
        label="部门负责人"
        v-bind="validateInfos.managerId"
      >
        <a-select
          v-model:value="dataWrapper.formData.managerId"
          :options="dataWrapper.allAccountList"
        >
        </a-select>
      </a-form-item>
      <a-form-item has-feedback label="部门说明" v-bind="validateInfos.note">
        <a-textarea
          v-model:value="dataWrapper.formData.note"
          placeholder="请输入部门说明"
          :auto-size="{ minRows: 2 }"
        />
      </a-form-item>
      <a-form-item
        has-feedback
        label="部门成员"
        v-bind="validateInfos.memberIds"
      >
        <a-select
          mode="multiple"
          placeholder="请选择部门成员"
          :filter-option="filterOption"
          v-model:value="dataWrapper.formData.memberIds"
          :options="dataWrapper.allAccountList"
        >
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ValidationRule } from 'ant-design-vue/lib/form/Form'
import { Form } from 'ant-design-vue'
import type { EditOrgDialogForm, EditOrgDialogState } from '../types'
import type { ASelectItemType } from '#/antd'
const { useForm } = Form

const props = defineProps<{
  dataWrapper: EditOrgDialogState
}>()

const emits = defineEmits<{
  (e: 'enter'): void
}>()

const rules = ref<Record<keyof EditOrgDialogForm, ValidationRule[]>>({
  name: [{ required: true, message: '部门名称必填', trigger: 'blur' }],
  code: [{ required: true, message: '部门标识必填', trigger: 'blur' }],
  pid: [{ required: true, message: '部门父ID必填', trigger: 'blur' }],
  level: [
    {
      required: true,
      message: '部门父ID必填',
      trigger: 'change',
      type: 'integer',
    },
  ],
  note: [],
  managerId: [],
  phone: [],
  memberIds: [],
})
const { validate, validateInfos, resetFields } = useForm(
  props.dataWrapper.formData,
  rules
)

const handleOk = () => {
  validate()
    .then(() => {
      emits('enter')
    })
    .catch((err) => {
      console.error(err.errorFields[0].errors[0])
    })
}
const cancel = () => resetFields()
const filterOption = (input: string, option: ASelectItemType) => {
  if (option.label) {
    return option.label.includes(input)
  }
  return false
}
</script>

<style lang="scss" scoped>
@include b(edit-org-dialog) {
}
</style>
